<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 日志管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form :model="query" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                    <el-form-item prop="title">
                        <el-input v-model="query.title" placeholder="模块名" style="width: 150px" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item prop="operName">
                    <el-input v-model="query.operName" placeholder="操作人" style="width: 150px" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-date-picker
                        v-model="dateRange"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        class="handle-select mr10"
                    ></el-date-picker>
                    <el-form-item prop="businessType">
                    <el-select placeholder="操作类型" v-model="query.businessType" class="handle-select mr10">
                        <el-option v-for="bt in businessTypes" :label="bt.name" :key="bt.id" :value="bt.id"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item prop="status">
                    <el-select placeholder="操作状态" v-model="query.status" class="handle-select mr10">
                        <el-option v-for="st in statuList" :label="st.name" :key="st.id" :value="st.id"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="reset('queryForm')">重置</el-button>
                </el-form>
                <el-button type="primary" icon="el-icon-download" class="handle-del mr10" @click="handleExport">导出全部 </el-button>
                <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除 </el-button>
                <el-button type="primary" icon="el-icon-delete-solid" class="handle-del mr10" @click="clearData">清空日志 </el-button>
            </div>
            <el-table
                :data="tableData"
                v-loading="loading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="operId" label="日志编号" align="center"></el-table-column>
                <el-table-column prop="title" label="模块名" align="center"></el-table-column>
                <el-table-column prop="businessType" label="业务类型" align="center">
                    <template scope="scope">
                        <span>{{ businessTypeFormat(scope.row.businessType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="operName" label="操作人员" align="center"></el-table-column>
                <el-table-column prop="status" label="操作状态" align="center">
                    <template scope="scope">
                        <el-tag type="success" v-show="scope.row.status == 0">成功</el-tag>
                        <el-tag v-show="scope.row.status == 1">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="operTime" label="操作时间" width="240" align="center"></el-table-column>
                <el-table-column prop="operLocation" label="操作地址" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-view" @click="handleLook(scope.$index, scope.row)">查看 </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="jumper,total, prev, pager, next, sizes"
                    @size-change="handleSizeChange"
                    :current-page.sync="query.pageIndex"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="open" width="60%" @close="cancel">
            <el-form ref="form" :model="form" label-width="100px" size="mini">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="操作模块：">{{ form.title }} / {{ businessTypeFormat(form.businessType) }}</el-form-item>
                        <el-form-item label="登录信息："
                            >{{ form.operName }} /{{ form.deptName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item
                        >
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
                        <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作状态：">
                            <div v-if="form.status === 0">正常</div>
                            <div v-else-if="form.status === 1">失败</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listOperLog, delOperLog, batchDelOperLog, exportOperLog, clearOperLog } from '@/api/operLog';

export default {
    name: 'operlog',
    data() {
        return {
            query: {
                title: '',
                pageIndex: 1,
                pageSize: 10,
                operName: '',
                status: undefined,
                businessType: undefined
            },
            loading: true,
            // 显示搜索条件
            showSearch: true,
            tableData: [],
            multipleSelection: [],
            delList: [],
            dateRange: [],
            businessTypes: [
                {
                    name: '全部',
                    id: 0
                },
                {
                    name: '新增',
                    id: 1
                },
                {
                    name: '修改',
                    id: 2
                },
                {
                    name: '删除',
                    id: 3
                },
                {
                    name: '导出',
                    id: 4
                },
                {
                    name: '授权',
                    id: 5
                },
                {
                    name: '清空数据',
                    id: 6
                }
            ],
            statuList: [
                {
                    name: '成功',
                    id: 0
                },
                {
                    name: '失败',
                    id: 1
                }
            ],
            title: '',
            open: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            listOperLog(this.addDateRange(this.query, this.dateRange)).then((res) => {
                const data = res.data;
                this.tableData = data.data;
                this.pageTotal = data.count;
                this.loading = false;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            //重置页码
            this.query.pageIndex = 1;
            this.getData();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除该日志吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    const $this = this;
                    delOperLog(row.operId).then((res) => {
                        $this.$message.success('删除成功');
                        $this.getData();
                        $this.idx = index;
                    });
                })
                .catch(() => {});
        },
        // 表单重置
        reset() {
            this.dateRange = [];
            this.resetForm('queryForm');
            this.handleSearch();
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                const operid = this.multipleSelection[i].operId;
                str += operid + ',';
            }
            const operids = str.substring(0, str.lastIndexOf(','));
            // 二次确认删除
            this.$confirm(`确定要删除日志编号为(${operids})的日志吗？`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    //删除最后一个逗号
                    const $this = this;
                    batchDelOperLog(operids).then((res) => {
                        $this.$message.success(`删除了${operids}`);
                        $this.multipleSelection = [];
                        $this.getData();
                    });
                })
                .catch(() => {});
        },
        //清除日志
        clearData() {
            this.$confirm(`确定要清空日志吗？`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    const $this = this;
                    clearOperLog().then((res) => {
                        $this.$message.success(`清空成功`);
                        $this.getData();
                    });
                })
                .catch(() => {});
        },

        // 查看日志详细信息操作
        handleLook(index, row) {
            this.title = '日志详细信息';
            this.idx = index;
            this.form = row;
            this.open = true;
        },
        // 提交按钮
        submitForm: function () {
            const $this = this;
            this.$refs['form'].validate((valid) => {});
        },
        //取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 分页导航
        handlePageChange() {
            this.getData();
        },
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getData();
        },
        handleExport() {
            this.$confirm('是否确认导出所有日志数据?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function () {
                    return exportOperLog();
                })
                .then((response) => {
                    this.downloadFile(response, '日志信息');
                });
        }
    }
};
</script>

<style scoped>
body {
    margin: 0;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
